<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.qw{
			width: 550px;
			margin: 0 auto;
			border: 1px solid #00F5FF;
			min-height: 400px;
		}
		p{
			right: 100px;
			color:#00F5FF;
			font-weight:bolder;
			margin-left:20px;
		}
		.ejr{
		  text-align: center;
		  margin: 10px;
		}
		select{
			width:160px;
			height: 30px;
			margin-left: 10px;
			color: #000;
			font-size: 18px;
			/*控制对象的加粗

			font-weight 属性*/
			font-weight:bolder;
		}
		option{
			font-size: 14px;
			color: #000;
		}
	</style>
</head>
<body>
<div class="qw">
	<p><span>姓名：</span><span id="sds"></span></p>
	<p><span>年龄：</span><span id="sd"></span></p>
	<p><span>朋友：</span><span id="sdes"></span></p>
</div>
<div class="ejr">
<select id="select">
	<option>广西</option>
</select>省
<select id="wqsd">
	<option>南宁</option>
</select>市
<select id="tret">
	<option>都安</option>
</select>区
</div>
 <script type="text/javascript" src="js/jquery3.js"></script>
 <script type="text/javascript">
 	$.get('json/js.json',function(res){
 		$('#sds').text(res.name);
 		$('#sd').text(res.sga);
 		$('#sdes').text(res.frien);
 		var fanhk=" ";
 		for (var i = 0; i < res.frien.length; i++) {
 			fanhk+=res.frien[i].name+" ";
 		}
 		$('#sdes').text(fanhk);
 	})
 	$.get('json/q.json',function(rr){
 		// console.log(q);
 		$('#select').empty();
 		for (var t = 0; t < rr.length; t++) {
 		$('#select').append('<option>'+rr[t].name+'</option>');
 		}
 	})
 	$.get('json/w.json',function(rr){
 		$('#wqsd').empty(); 		
 		for (var t = 0; t < rr.length; t++) {
 		$('#wqsd').append('<option>'+rr[t].name+'</option>');
 		}
 	})
 	$.get('json/r.json',function(rr){
 		$('#tret').empty(); 		
 		for (var t = 0; t < rr.length; t++) {
 		$('#tret').append('<option>'+rr[t].name+'</option>');
 		}
 	})


 	$('#select').change(function(){
 	var cid=$(this).val();
 	var tmp=[];
 	$.get('json/w.json',function(qwq){                
        for (var f = 0; f < qwq.length; f++) {
        	if(cid==qwq[f].pid){
        		// console.log(qwq[i]);
        		tmp.push(qwq[f]);
        	}
        };
        $('#wqsd').empty(); 
        for (var e = 0; e < tmp.length; e++) {
        	var option='<option value="">'+tmp[e].name+'</option>';
        	$('#wqsd').append(option);
        }    
    });
 		
 	
 	});



 $('#wqsd').change(function(){
 	var pid=$(this).val();
 	var teq=[];
 	$.get('json/r.json',function(){
 		// console.log(pid);

 	})
 })
 </script>
</body>
</html>